<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="normalize.css"/>
	<link rel="stylesheet" type="text/css" href="demo.css"/>
	<!--<link rel="stylesheet" type="text/css" href="component.css"/>-->
	<style>
		*,
		*:after,
		*::before {
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html,
		body,
		.st-container,
		.st-pusher,
		.st-content {
			height: 100%;
		}

		.st-content {
			overflow-y: scroll;
			background: #f3efe0;
		}

		.st-pusher {
			position: relative;
			left: 0;
			z-index: 99;
			height: 100%;
			-webkit-transition: -webkit-transform 0.5s;
			transition: transform 0.5s;
		}
		.st-pusher::after {
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			background: rgba(0,0,0,0.2);
			content: '';
			opacity: 0;
			-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
			transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
		}

		.st-menu-open .st-pusher::after {
			width: 100%;
			height: 100%;
			opacity: 1;
			-webkit-transition: opacity 0.5s;
			transition: opacity 0.5s;
		}
		.st-menu {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			visibility: hidden;
			width: 300px;
			height: 100%;
			background: #48a770;
			-webkit-transition: all 0.5s;
			transition: all 0.5s;
		}

		.st-menu::after {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,1);
			content: '';
			opacity: 1;
			-webkit-transition: opacity 0.5s;
			transition: opacity 0.5s;
		}
		.st-menu-open .st-menu::after {
			width: 0;
			height: 0;
			opacity: 0;
			-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
			transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
		}

		.st-effect-1.st-menu {
			visibility: visible;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
		}

		.st-effect-1.st-menu-open .st-effect-1.st-menu {
			visibility: visible;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		.st-effect-1.st-menu::after {
			display: none;
		}
	</style>

	<script src="../resource/jquery-2.1.1.js"></script>

</head>
<body>
<div id="st-container" class="st-container">
	<!--
		example menus
		these menus will be on top of the push wrapper
	-->
	<nav class="st-menu st-effect-1" id="menu-1">
		<h2 class="icon icon-lab">Sidebar</h2>
		<ul>
			<li><a class="icon icon-data" href="#">Data Management1</a></li>
			<li><a class="icon icon-location" href="#">Location</a></li>
			<li><a class="icon icon-study" href="#">Study</a></li>
			<li><a class="icon icon-photo" href="#">Collections</a></li>
			<li><a class="icon icon-wallet" href="#">Credits</a></li>
		</ul>
	</nav>

	<!-- content push wrapper -->
	<div class="st-pusher">
		<div class="st-content"><!-- this is the wrapper for the content -->
			<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
				<header class="codrops-header">
					<h1>边栏过渡效果（Sidebar Transitions）</h1>
				</header>
				<div class="main clearfix">
					<div id="st-trigger-effects" class="column">
						<button data-effect="st-effect-1">效果一</button>
						<button data-effect="st-effect-2">效果二</button>
						<button data-effect="st-effect-3">效果三</button>
						<button data-effect="st-effect-4">效果四</button>
						<button data-effect="st-effect-5">效果五</button>
						<button data-effect="st-effect-6">效果六</button>
						<button data-effect="st-effect-7">效果七</button>
						<button data-effect="st-effect-8">效果八</button>
						<button data-effect="st-effect-9">效果九</button>
						<button data-effect="st-effect-10">效果十</button>
						<button data-effect="st-effect-11">效果十一</button>
						<button data-effect="st-effect-12">效果十二</button>
						<button data-effect="st-effect-13">效果十三</button>
						<button data-effect="st-effect-14">效果十四</button>
					</div>
				</div><!-- /main -->
				<div class="footer-banner" style="width:728px; margin:160px auto 0"></div>
			</div><!-- /st-content-inner -->
		</div><!-- /st-content -->
	</div><!-- /st-pusher -->
</div>

<script>

	$(function(){
		$('button').on('click', function(event){
			event.stopPropagation();
			event.preventDefault();
			$('#st-container').addClass('st-effect-1 st-menu-open');

		})
		$('html').on('click', function(event){
			console.log(event.target);
			console.log(event.currentTarget);

			if($('#st-container').hasClass('st-menu-open')){
				$('#st-container').removeClass('st-menu-open');
			}

		})

	})
</script>
</body>
</html>